import { logout } from '@entities/User/model/slice/userSlice'
import { useAppDispatch } from '@shared/lib/hooks/redux'
import { clearTokens } from '@shared/lib/store/tokenSlice'
import { Button } from '@shared/ui/Button'
import { Popover } from '@shared/ui/Popover'
import { useNavigate } from 'react-router-dom'
import { NavLink } from 'react-router-dom'
import { UserInfo } from '../UserInfo/UserInfo'
import styles from './UserProfile.module.scss'

export const UserProfile = () => {
  const dispatch = useAppDispatch()

  const navigate = useNavigate()
  const onLogout = () => {
    dispatch(logout())
    dispatch(clearTokens())
    navigate('/')
    window.location.reload()
  }

  const renderPanel = () => (
    <div className={styles['dropdown']}>
      <Button link size='small'>
        <NavLink to='/user-settings'>Настройки</NavLink>
      </Button>
      <Button link onClick={onLogout} size='small'>
        Выйти
      </Button>
    </div>
  )

  return (
    <div className={styles.component}>
      <UserInfo fontTitle='h5' />
      <Popover
        classname={styles['popover-icon']}
        offsetX={20}
        offsetY={-8}
        placementPanel='left-start'
        renderButton={() => <span className='material-symbols-rounded'>more_vert</span>}
        renderPanel={renderPanel}
      ></Popover>
    </div>
  )
}
